<template>
  <div class="app-container">
    <div class="wdd-show-row">
      <el-card class="wdd-show-col">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="近一周" name="0">
            <span class="h2">近一周统计：</span>
            <span class="span">答题数：</span><span>{{ statisticForWeek.questionCount }}</span>
            <span class="span">正确数：</span><span>{{ statisticForWeek.questionCorrect }}</span>
            <span class="span">答题次数：</span><span>{{ statisticForWeek.answerNum }}</span>
            <span class="span">总时长：</span><span>{{ statisticForWeek.doTime }}</span>
          </el-tab-pane>
          <el-tab-pane label="近一月" name="1">
            <span class="h2">近一月统计：</span>
            <span class="span">答题数：</span><span>{{ statisticForMonth.questionCount }}</span>
            <span class="span">正确数：</span><span>{{ statisticForMonth.questionCorrect }}</span>
            <span class="span">答题次数：</span><span>{{ statisticForMonth.answerNum }}</span>
            <span class="span">总时长：</span><span>{{ statisticForMonth.doTime }}</span>
          </el-tab-pane>
          <el-tab-pane label="近一年" name="2">
            <span class="h2">近一月统计：</span>
            <span class="span">答题数：</span><span>{{ statisticForYear.questionCount }}</span>
            <span class="span">正确数：</span><span>{{ statisticForYear.questionCorrect }}</span>
            <span class="span">答题次数：</span><span>{{ statisticForYear.answerNum }}</span>
            <span class="span">总时长：</span><span>{{ statisticForYear.doTime }}</span>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
    <el-form :model="queryParam" ref="queryForm" :inline="true" style="margin-top: 30px;">
      <el-form-item label="真实姓名：" prop="name">
        <el-input v-model="queryParam.name" clearable></el-input>
      </el-form-item>
      <el-form-item label="公司名称：" prop="deptName">
        <el-select v-model="queryParam.deptName" clearable placeholder="请选择公司名称">
          <el-option v-for="item in departmentTree" :key="item.id" :label="item.name" :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm" v-has-perm="['practice:build:statistic']">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="listLoading" align="center" :data="tableData" border fit highlight-current-row
      style="width: 100%;">
      <el-table-column prop="realName" label="真实姓名" />
      <el-table-column prop="questionCorrect" label="正确数/答题数">
        <template #default="{ row }">
          {{ row.questionCorrect }}/{{ row.questionCount }}
        </template>
      </el-table-column>
      <el-table-column prop="answerNum" label="答题次数" />
      <el-table-column prop="doTime" label="练习时长" />
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParam.pageIndex"
      v-model:limit="queryParam.pageSize" @pagination="search" :autoScroll="false" />
  </div>
</template>

<script>

import { disabledDate } from '@/utils/index'
import { EnumMap } from '@/api/EnumMap'
import { tree } from '@/api/department'
import { answerInfo, statisticPage, companyNameList } from '@/api/practice'

export default {
  name: 'PracticeStatistics',
  data() {
    return {
      disabledDate: disabledDate,
      EnumMap: EnumMap,
      statisticForMonth: {},
      statisticForWeek: {},
      statisticForYear: {},
      queryParam: {
        name: null,
        deptName: null,
        pageIndex: 1,
        pageSize: 10,
        type: 1,
      },
      listLoading: false,
      tableData: [],
      departmentTree: [],
      total: 0,
      activeName: '1',
    }
  },
  mounted() {
    this.search()
    this.getcompanyNameList()
  },
  methods: {
    getcompanyNameList() {
      companyNameList().then(data => {
        if (data.code === 1) {
          this.departmentTree = data.response
        } else {
          this.$message.error(data.message)
        }
      })
    },
    handleClick(tab, event) {
      if (tab.props.name == '0') {
        this.queryParam.type = 0
        this.search()
      } else if (tab.props.name == '1') {
        this.queryParam.type = 1
        this.search()
      } else if (tab.props.name == '2') {
        this.queryParam.type = 2
        this.search()
      }
      console.log(tab.props.name, event);
    },
    search() {
      this.listLoading = true
      statisticPage(this.queryParam).then(data => {
        if (data.code === 1) {
          const re = data.response
          re.data.list.forEach(item => {
            if (item.doTime !== null) {
              item.doTime = this.formatSeconds(item.doTime)
            } else {
              item.doTime = ''
            }
          })
          this.tableData = re.data.list
          if (re.statisticForMonth) {
            if (re.statisticForMonth.doTime !== null) {
              re.statisticForMonth.doTime = this.formatSeconds(re.statisticForMonth.doTime)
            }
            this.statisticForMonth = re.statisticForMonth
          }
          if (re.statisticForWeek) {
            if (re.statisticForWeek.doTime !== null) {
              this.statisticForWeek = re.statisticForWeek
            }
            re.statisticForWeek.doTime = this.formatSeconds(re.statisticForWeek.doTime)
          }
          if (re.statisticForYear) {
            if (re.statisticForYear.doTime !== null) {
              re.statisticForYear.doTime = this.formatSeconds(re.statisticForYear.doTime)
            }
            this.statisticForYear = re.statisticForYear
          }
          this.total = re.data.total
          this.queryParam.pageIndex = re.data.pageNum
        } else {
          this.$message.error(data.message)
        }
      }).finally(() => {
        this.listLoading = false
      })
    },
    submitForm() {
      this.queryParam.pageIndex = 1
      this.search()
    },
    //  秒数转化为时分秒
    formatSeconds(value) {
      //  秒
      let second = parseInt(value)
      //  分
      let minute = 0
      //  小时
      let hour = 0
      //  天
      //  let day = 0
      //  如果秒数大于60，将秒数转换成整数
      if (second > 60) {
        //  获取分钟，除以60取整数，得到整数分钟
        minute = parseInt(second / 60)
        //  获取秒数，秒数取佘，得到整数秒数
        second = parseInt(second % 60)
        //  如果分钟大于60，将分钟转换成小时
        if (minute > 60) {
          //  获取小时，获取分钟除以60，得到整数小时
          hour = parseInt(minute / 60)
          //  获取小时后取佘的分，获取分钟除以60取佘的分
          minute = parseInt(minute % 60)
          //  如果小时大于24，将小时转换成天
        }
      }

      let result = '' + parseInt(second) + '秒'
      if (minute > 0) {
        result = '' + parseInt(minute) + '分' + result
      }
      if (hour > 0) {
        result = '' + parseInt(hour) + '小时' + result
      }
      return result
    }
  }
}
</script>
<style>
.h2 {
  font-size: 20px;
  font-weight: bolder;
}

.span {
  margin-left: 20px;
  font-size: 15px;
}
</style>
